<template>
	<view class="uni-filter-dropdown">
		<view class="dropdown-btn" @click="onDropdown">
			<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
			<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
				<view class="icon-search-0"></view>
				<view class="icon-search-1"></view>
			</view>
			<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
				<view class="icon-calendar-0"></view>
				<view class="icon-calendar-1"></view>
			</view>
		</view>
		<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
		<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
			<!-- select-->
			<view v-if="isSelect" class="list">
				<label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
					@click="onItemClick($event, index)">
					<check-box class="check" :checked="item.checked" />
					<view class="checklist-content">
						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
					</view>
				</label>
			</view>
			<view v-if="isSelect" class="flex-r opera-area">
				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
					{{resource.reset}}</view>
				<view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
			</view>
			<!-- search -->
			<view v-if="isSearch" class="search-area">
				<input class="search-input" v-model="filterValue" />
			</view>
			<view v-if="isSearch" class="flex-r opera-area">
				<view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
					{{resource.reset}}</view>
			</view>
			<!-- range -->
			<view v-if="isRange">
				<view class="input-label">{{resource.gt}}</view>
				<input class="input" v-model="gtValue" />
				<view class="input-label">{{resource.lt}}</view>
				<input class="input" v-model="ltValue" />
			</view>
			<view v-if="isRange" class="flex-r opera-area">
				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
					{{resource.reset}}</view>
				<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
			</view>
			<!-- date -->
			<view v-if="isDate">
				<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
					<view></view>
				</uni-datetime-picker>
			</view>
		</view>
	</view>
</template>

<script>
import checkBox from '../uni-tr/table-checkbox.vue'

const resource = {
  reset: '重置',
  search: '搜索',
  submit: '确定',
  filter: '筛选',
  gt: '大于等于',
  lt: '小于等于',
  date: '日期范围'
}

const DropdownType = {
  Select: 'select',
  Search: 'search',
  Range: 'range',
  Date: 'date',
  Timestamp: 'timestamp'
}

export default {
  name: 'FilterDropdown',
  emits: ['change'],
  components: {
    checkBox
  },
  options: {
    virtualHost: true
  },
  props: {
    filterType: {
      type: String,
      default: DropdownType.Select
    },
    filterData: {
      type: Array,
      default () {
        return []
      }
    },
    mode: {
      type: String,
      default: 'default'
    },
    map: {
      type: Object,
      default () {
        return {
          text: 'text',
          value: 'value'
        }
      }
    }
  },
  computed: {
    canReset () {
      if (this.isSearch) {
        return this.filterValue.length > 0
      }
      if (this.isSelect) {
        return this.checkedValues.length > 0
      }
      if (this.isRange) {
        return (this.gtValue.length > 0 && this.ltValue.length > 0)
      }
      if (this.isDate) {
        return this.dateSelect.length > 0
      }
      return false
    },
    isSelect () {
      return this.filterType === DropdownType.Select
    },
    isSearch () {
      return this.filterType === DropdownType.Search
    },
    isRange () {
      return this.filterType === DropdownType.Range
    },
    isDate () {
      return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
    }
  },
  watch: {
    filters (newVal) {
      this._copyFilters()
    },
    indeterminate (newVal) {
      this.isIndeterminate = newVal
    }
  },
  data () {
    return {
      resource,
      enabled: true,
      isOpened: false,
      dataList: [],
      filterValue: '',
      checkedValues: [],
      gtValue: '',
      ltValue: '',
      dateRange: [],
      dateSelect: []
    }
  },
  created () {
    this._copyFilters()
  },
  methods: {
    _copyFilters () {
      const dl = JSON.parse(JSON.stringify(this.filterData))
      for (let i = 0; i < dl.length; i++) {
        if (dl[i].checked === undefined) {
          dl[i].checked = false
        }
      }
      this.dataList = dl
    },
    openPopup () {
      this.isOpened = true
      if (this.isDate) {
        this.$nextTick(() => {
          if (!this.dateRange.length) {
            this.resetDate()
          }
          this.$refs.datetimepicker.show()
        })
      }
    },
    closePopup () {
      this.isOpened = false
    },
    handleClose (e) {
      this.closePopup()
    },
    resetDate () {
      const date = new Date()
      const dateText = date.toISOString().split('T')[0]
      this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
    },
    onDropdown (e) {
      this.openPopup()
    },
    onItemClick (e, index) {
      const items = this.dataList
      const listItem = items[index]
      if (listItem.checked === undefined) {
        items[index].checked = true
      } else {
        items[index].checked = !listItem.checked
      }

      const checkvalues = []
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        if (item.checked) {
          checkvalues.push(item.value)
        }
      }
      this.checkedValues = checkvalues
    },
    datetimechange (e) {
      this.closePopup()
      this.dateRange = e
      this.dateSelect = e
      this.$emit('change', {
        filterType: this.filterType,
        filter: e
      })
    },
    timepickerclose (e) {
      this.closePopup()
    },
    handleSelectSubmit () {
      this.closePopup()
      this.$emit('change', {
        filterType: this.filterType,
        filter: this.checkedValues
      })
    },
    handleSelectReset () {
      if (!this.canReset) {
        return
      }
      const items = this.dataList
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        this.$set(item, 'checked', false)
      }
      this.checkedValues = []
      this.handleSelectSubmit()
    },
    handleSearchSubmit () {
      this.closePopup()
      this.$emit('change', {
        filterType: this.filterType,
        filter: this.filterValue
      })
    },
    handleSearchReset () {
      if (!this.canReset) {
        return
      }
      this.filterValue = ''
      this.handleSearchSubmit()
    },
    handleRangeSubmit (isReset) {
      this.closePopup()
      this.$emit('change', {
        filterType: this.filterType,
        filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
      })
    },
    handleRangeReset () {
      if (!this.canReset) {
        return
      }
      this.gtValue = ''
      this.ltValue = ''
      this.handleRangeSubmit(true)
    }
  }
}
</script>

<style lang="scss">
	.flex-r {
		display: flex;
		flex-direction: row;
	}

	.flex-f {
		flex: 1;
	}

	.a-i-c {
		align-items: center;
	}

	.j-c-c {
		justify-content: center;
	}

	.icon-select {
		width: 14px;
		height: 16px;
		border: solid 6px transparent;
		border-top: solid 6px #ddd;
		border-bottom: none;
		background-color: #ddd;
		background-clip: content-box;
		box-sizing: border-box;
	}

	.icon-select.active {
		background-color: #1890ff;
		border-top-color: #1890ff;
	}

	.icon-search {
		width: 12px;
		height: 16px;
		position: relative;
	}

	.icon-search-0 {
		border: 2px solid #ddd;
		border-radius: 8px;
		width: 7px;
		height: 7px;
	}

	.icon-search-1 {
		position: absolute;
		top: 8px;
		right: 0;
		width: 1px;
		height: 7px;
		background-color: #ddd;
		transform: rotate(-45deg);
	}

	.icon-search.active .icon-search-0 {
		border-color: #1890ff;
	}

	.icon-search.active .icon-search-1 {
		background-color: #1890ff;
	}

	.icon-calendar {
		color: #ddd;
		width: 14px;
		height: 16px;
	}

	.icon-calendar-0 {
		height: 4px;
		margin-top: 3px;
		margin-bottom: 1px;
		background-color: #ddd;
		border-radius: 2px 2px 1px 1px;
		position: relative;
	}
	.icon-calendar-0:before, .icon-calendar-0:after {
		content: '';
		position: absolute;
		top: -3px;
		width: 4px;
		height: 3px;
		border-radius: 1px;
		background-color: #ddd;
	}
	.icon-calendar-0:before {
		left: 2px;
	}
	.icon-calendar-0:after {
		right: 2px;
	}

	.icon-calendar-1 {
		height: 9px;
		background-color: #ddd;
		border-radius: 1px 1px 2px 2px;
	}

	.icon-calendar.active {
		color: #1890ff;
	}

	.icon-calendar.active .icon-calendar-0,
	.icon-calendar.active .icon-calendar-1,
	.icon-calendar.active .icon-calendar-0:before,
	.icon-calendar.active .icon-calendar-0:after {
		background-color: #1890ff;
	}

	.uni-filter-dropdown {
		position: relative;
		font-weight: normal;
	}

	.dropdown-popup {
		position: absolute;
		top: 100%;
		background-color: #fff;
		box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
		min-width: 150px;
		z-index: 1000;
	}

	.dropdown-popup-left {
		left: 0;
	}

	.dropdown-popup-right {
		right: 0;
	}

	.uni-dropdown-cover {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
		z-index: 100;
	}

	.list {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.list-item {
		padding: 5px 10px;
		text-align: left;
	}

	.list-item:hover {
		background-color: #f0f0f0;
	}

	.check {
		margin-right: 5px;
	}

	.search-area {
		padding: 10px;
	}

	.search-input {
		font-size: 12px;
		border: 1px solid #f0f0f0;
		border-radius: 3px;
		padding: 2px 5px;
		min-width: 150px;
		text-align: left;
	}

	.input-label {
		margin: 10px 10px 5px 10px;
		text-align: left;
	}

	.input {
		font-size: 12px;
		border: 1px solid #f0f0f0;
		border-radius: 3px;
		margin: 10px;
		padding: 2px 5px;
		min-width: 150px;
		text-align: left;
	}

	.opera-area {
		cursor: default;
		border-top: 1px solid #ddd;
		padding: 5px;
	}

	.opera-area .btn {
		font-size: 12px;
		border-radius: 3px;
		margin: 5px;
		padding: 4px 4px;
	}

	.btn-default {
		border: 1px solid #ddd;
	}

	.btn-default.disable {
		border-color: transparent;
	}

	.btn-submit {
		background-color: #1890ff;
		color: #ffffff;
	}
</style>
